<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--2.创建模版-->
<div id="app">
  {{message}}

  <input type="text" v-model="username">
  {{username}}
</div>

<!--
   spa： Single Page Application
-->

</body>
<!--1.引入vue类库-->
<script src="../../lib/vue.global.js"></script>
<script>

   /**
    *   插值系统：
    *      胡须表达式 v-model
    *
    *   单向数据流（绑定） ： 胡须表达式(mustache), data-->html template
    *       数据渲染到 页面模版
    *   双向数据流（绑定）:  v-model ,data<--> html template
    *      数据 渲染到页面模版
    *      页面内容的化 会改变数据的值
    *      [数据改变之后，页面的相关内容会被再次渲染]
    * */

  /*vue实例*/
  var app=   Vue.createApp({
       data:function (){// 工厂模式
          return {
            message:'hello vue',
            username:'default'
          }
       }
     });

  app.mount('#app'); // 挂载

</script>

</html>